<template>
  <div class="service-container">
    <!-- 顶部标题区 -->
    <div class="header-section">
      <h1 class="main-title">服务与支持</h1>
      <p class="subtitle">为您提供全方位的软件技术支持与专业服务</p>
    </div>

    <!-- 服务内容区 -->
    <a-row :gutter="[24, 24]" class="content-section" justify="center">
      <!-- 技术支持 -->
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card hoverable class="service-card">
          <template #cover>
            <div class="card-icon-wrapper">
              <CustomerServiceOutlined class="card-icon" />
            </div>
          </template>
          <a-card-meta title="技术支持">
            <template #description>
              <div class="card-desc">7×24小时技术支持热线</div>
              <div class="card-content">
                <p>• 远程技术支持服务</p>
                <p>• 现场技术支持服务</p>
                <p>• 产品使用培训</p>
                <p>• 技术咨询服务</p>
                <a-button type="primary" block style="margin-top: 16px">
                  联系我们
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>

      <!-- 售后服务 -->
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card hoverable class="service-card">
          <template #cover>
            <div class="card-icon-wrapper">
              <ToolOutlined class="card-icon" />
            </div>
          </template>
          <a-card-meta title="售后服务">
            <template #description>
              <div class="card-desc">完善的售后服务体系</div>
              <div class="card-content">
                <p>• 产品质保服务</p>
                <p>• 设备维修与保养</p>
                <p>• 软件升级服务</p>
                <p>• 备件更换服务</p>
                <a-button type="primary" block style="margin-top: 16px">
                  提交工单
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>

      <!-- 文档资源 -->
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card hoverable class="service-card">
          <template #cover>
            <div class="card-icon-wrapper">
              <FileTextOutlined class="card-icon" />
            </div>
          </template>
          <a-card-meta title="文档资源">
            <template #description>
              <div class="card-desc">丰富的产品文档与教程</div>
              <div class="card-content">
                <p>• 产品使用手册</p>
                <p>• API 接口文档</p>
                <p>• 视频教程</p>
                <p>• 常见问题解答</p>
                <a-button type="primary" block style="margin-top: 16px">
                  查看文档
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>

      <!-- 在线培训 -->
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card hoverable class="service-card">
          <template #cover>
            <div class="card-icon-wrapper">
              <ReadOutlined class="card-icon" />
            </div>
          </template>
          <a-card-meta title="在线培训">
            <template #description>
              <div class="card-desc">专业的产品培训课程</div>
              <div class="card-content">
                <p>• 产品操作培训</p>
                <p>• 系统集成培训</p>
                <p>• 开发者培训</p>
                <p>• 认证考试服务</p>
                <a-button type="primary" block style="margin-top: 16px">
                  预约培训
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>

      <!-- 定制开发 -->
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card hoverable class="service-card">
          <template #cover>
            <div class="card-icon-wrapper">
              <CodeOutlined class="card-icon" />
            </div>
          </template>
          <a-card-meta title="定制开发">
            <template #description>
              <div class="card-desc">个性化解决方案开发</div>
              <div class="card-content">
                <p>• 定制功能开发</p>
                <p>• 系统集成服务</p>
                <p>• 二次开发支持</p>
                <p>• 项目实施服务</p>
                <a-button type="primary" block style="margin-top: 16px">
                  咨询报价
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>

      <!-- 云服务 -->
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card hoverable class="service-card">
          <template #cover>
            <div class="card-icon-wrapper">
              <CloudOutlined class="card-icon" />
            </div>
          </template>
          <a-card-meta title="云服务">
            <template #description>
              <div class="card-desc">稳定可靠的云端服务</div>
              <div class="card-content">
                <p>• 云平台部署</p>
                <p>• 数据存储服务</p>
                <p>• 云端监控服务</p>
                <p>• 数据备份服务</p>
                <a-button type="primary" block style="margin-top: 16px">
                  了解详情
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>

    <!-- 联系方式区域 -->
    <div class="contact-section">
      <a-card class="contact-card">
        <h2 class="contact-title">联系我们</h2>
        <a-row :gutter="[32, 24]">
          <a-col :xs="24" :md="8">
            <div class="contact-item">
              <PhoneOutlined class="contact-icon" />
              <h3>服务热线</h3>
              <p>18850044111</p>
              <p class="time-info">周一至周五 9:00-18:00</p>
            </div>
          </a-col>
          <a-col :xs="24" :md="8">
            <div class="contact-item">
              <MailOutlined class="contact-icon" />
              <h3>电子邮箱</h3>
              <p>support@zomiot.com</p>
              <p class="time-info">24小时内回复</p>
            </div>
          </a-col>
          <a-col :xs="24" :md="8">
            <div class="contact-item">
              <EnvironmentOutlined class="contact-icon" />
              <h3>公司地址</h3>
              <p>厦门市湖里区金钟路3号1706-2</p>
              <p class="time-info">欢迎预约上门拜访</p>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import {
  CustomerServiceOutlined,
  ToolOutlined,
  FileTextOutlined,
  ReadOutlined,
  CodeOutlined,
  CloudOutlined,
  PhoneOutlined,
  MailOutlined,
  EnvironmentOutlined
} from '@ant-design/icons-vue';
</script>

<style scoped>
.service-container {
  min-height: calc(100vh - 200px);
  padding: 0;
  background: linear-gradient(to bottom, #f0f2f5 0%, #ffffff 100%);
}

/* 顶部标题区 */
.header-section {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 20px;
}

.main-title {
  font-size: 42px;
  font-weight: 700;
  color: #001529;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 18px;
  color: #666;
  margin: 0;
}

/* 内容区域 */
.content-section {
  max-width: 1400px !important;
  margin: 0 auto 60px !important;
  padding: 0 20px !important;
}

/* 服务卡片 */
.service-card {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-icon-wrapper {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}

.card-icon {
  font-size: 72px;
  color: #fff;
}

.card-desc {
  color: #999;
  font-size: 14px;
  margin-bottom: 12px;
}

.card-content {
  margin-top: 8px;
}

.card-content p {
  color: #666;
  line-height: 2;
  margin: 8px 0;
  font-size: 14px;
}

:deep(.ant-card-meta-title) {
  font-size: 20px;
  font-weight: 600;
  color: #001529;
}

:deep(.ant-card-meta-description) {
  font-size: 14px;
  color: #999;
}

/* 联系方式区域 */
.contact-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.contact-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #001529;
  margin-bottom: 40px;
}

.contact-item {
  text-align: center;
  padding: 20px;
}

.contact-icon {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 16px;
  display: block;
}

.contact-item h3 {
  font-size: 20px;
  font-weight: 600;
  color: #001529;
  margin: 16px 0 12px;
}

.contact-item p {
  font-size: 16px;
  color: #666;
  margin: 8px 0;
}

.time-info {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 32px;
  }

  .subtitle {
    font-size: 16px;
  }

  .contact-title {
    font-size: 24px;
  }

  .card-icon-wrapper {
    height: 140px;
  }

  .card-icon {
    font-size: 56px;
  }
}
</style>